import React, { Component } from 'react';
import { Motion, spring } from 'react-motion';
import styles from './index.less';

class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isHovering: false,
      selectedId: 3,
    };
  }

  handleMouseHover = () => {
    this.setState({ isHovering: !this.state.isHovering });
  }

  handleMouseClick = (id) => {
    const { baseMapLayers, onChangeBaseMap } = this.props;
    console.log("select basemap =>", baseMapLayers.filter(item => item.id === id)[0]);
    this.setState({ selectedId: id });
    if(onChangeBaseMap){
      onChangeBaseMap(baseMapLayers.filter(item => item.id === id)[0])
    }
  }

  render() {
    const { selectedId } = this.state;
    const { style, baseMapLayers } = this.props;
    return (
      <div style={{ ...style }}>
        <div
          onMouseEnter={this.handleMouseHover}
          onMouseLeave={this.handleMouseHover}
          style={{ display: 'flex', flexDirection: 'row' }}
        >
          <div style={{ padding: 3, backgroundColor: '#fff' }}>
            <img src={baseMapLayers.filter(item => item.id === selectedId)[0].image} style={{ width: 48, height: 48 }} />
            <div style={{ position: "absolute", bottom: 3, left: 3, width: 48, height: 16, backgroundColor: 'rgba(255,255,255,0.5)', textAlign: 'center', lineHeight: '16px', fontSize: 12 }}>
              {baseMapLayers.filter(item => item.id === selectedId)[0].title}
            </div>
          </div>
          {
            this.state.isHovering &&
            baseMapLayers.filter(item => item.id !== selectedId).map((item, index) => {
              return <div className={styles.img_container} key={item.id} onClick={() => { this.handleMouseClick(item.id) }}>
                <img src={item.image} style={{ width: 48, height: 48 }} />
                <div style={{ position: "absolute", bottom: 3, left: 3 + 54 * (index+1), width: 48, height: 16, backgroundColor: 'rgba(255,255,255,0.5)', textAlign: 'center', lineHeight: '16px', fontSize: 12 }}>
                  {item.title}
                </div>
              </div>
            })
          }
        </div>

      </div>

    );
  }
}

export default index;
